/**
 * create by young (young2f@outlook.com) on 2020/9/12
 * 补退货入库
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, DatePicker, Drawer, Form, Input, Table, Tabs} from 'antd';
import styles from '../../index.less';
import ViewTitle from '../../../components/ViewTitle';
import FormBase from '../../../components/Base/FormBase';
import notify from "../../../components/NotificationExtra";
import {FormField, ModalView, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalInboundOrderDetail from "./../modal/ModalInboundOrderDetail";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');

const table = 'InboundOrder';
const title = '入库单';

@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            procure,
            store
          }) => ({...user, ...global, ...procure, ...store, ...dynamicLabel}))
export default class ReplenishInbound extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const {dispatch} = this.props;
    // dispatch && dispatch({
    //   type: 'global/getModel',
    //   payload: {table, tenantCode: this.getTenantCode()}
    // });
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table: 'ProcureMaterialRecord'}
    });
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });

    dispatch && dispatch({
      type: 'procure/findMaterialRecordMany',
      payload
    });
  }

  cols() {
    return [
      {
        title: "物料编码", dataIndex: 'code', key: 'code', fixed: 'left', render: (value, record) => {
          const {code, name, unit} = record;
          return this.getProductionElement(code, name, unit);
        }
      },
      {title: "采购单编码", dataIndex: 'procureOrderCode', key: 'procureOrderCode'},
      {title: "形态", dataIndex: 'subcategory', key: 'subcategory'},
      {title: "物料规格", dataIndex: 'spec', key: 'spec'},
      {title: "物料编号", dataIndex: 'number', key: 'number'},
      {title: "供应商", dataIndex: 'vendor', key: 'vendor'},
      {title: "去向", dataIndex: 'target', key: 'target'},

      {title: "采购数量", dataIndex: 'count', key: 'count'},

      {title: "入库数量", dataIndex: 'inboundCount', key: 'inboundCount'},
      {
        title: '入库时间',
        dataIndex: 'inboundDate',
        key: 'inboundDate'
      },
      {
        title: "采购时间", dataIndex: 'createdTs', key: 'createdTs', render: value => {
          return <div>{moment(value).format('YYYY-MM-DD HH:mm:ss')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 160,
        render: (value, record) => {
          return (
            <span>
              {<a style={{marginRight: '6px'}} onClick={() => {

                record.orderCode = record.code;
                this.setState({showDetail: true, record});
              }}>详情</a>}
            </span>
          );
        }
      }
    ];
  }

  getSearchFields = () => {
    const arr = [
      <FormField
        label="采购单编码"
        name="code"
        key={1}
      >
        <Input allowClear placeholder={`请输入采购单编码`}/>
      </FormField>,
      <FormField
        label="供应商"
        name="vendor"
        key={2}
      >
        <Input allowClear placeholder="请输入供应商"/>
      </FormField>,

      <FormField
        label="创建时间"
        name="createdTs"
        key={3}
        initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
      >
        <RangePicker allowClear={true}
          // style={{ width: '150%' }}
        />
      </FormField>
    ];
    return arr;

  };


  render() {
    const {materialRecords = [], inboundRecords = [], _notify, form} = this.props;

    const {showDetail, record, inboundRecord} = this.state;
    if (_notify) {
      notify(_notify);
    }

    return (
      <Form className={styles.content}>

            <ViewTitle
              title={`补退货入库列表`}
              level={1}
              actions={<Button type={'primary'}>添加补退货入库</Button>}
            ></ViewTitle>
            <SearchForm
              style={{marginLeft: '6px', marginRight: '6px'}}
              onSearch={() => {
                this.state.current = 1;
                this.componentDidMount();
              }}
              onReset={this.handleReset}
              cols={3}
              min={6}
              expandText="展开"
              form={form}
            >
              {[<FormField
                label="供应商"
                name="vendor"
                key={2}
              >
                <Input allowClear placeholder="请输入供应商"/>
              </FormField>,
                <FormField
                  label="创建时间"
                  name="createdTs"
                  key={3}
                  initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
                >
                  <RangePicker allowClear={true}
                    // style={{ width: '150%' }}
                  />
                </FormField>]}
            </SearchForm>
            <Table
              className={styles.antTable}
              bordered={true}
              columns={this.cols()}
              dataSource={inboundRecords}
              // scroll={{ x: true }}
              pagination={true}
            ></Table>
            {showDetail && <Drawer
              visible={showDetail}
              title={`${title}详情`}
              placement="left"
              width={'80%'}
              style={{padding: 0}}
              onClose={() => {
                this.setState({showDetail: false});
                this.componentDidMount();
              }}
            >
              <ModalInboundOrderDetail
                isEdit={true}
                values={inboundRecord}
              > </ModalInboundOrderDetail>
            </Drawer>}

      </Form>
    );
  }
}
